<template>
	<view style="padding-bottom: 130rpx;">

		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000"
			backState="1000">
			<view class="title-box">
				<text>车辆违章统计</text>
			</view>
		</z-nav-bar>

		<u-sticky :offsetTop="offsetTop">

			<view class="searchBox">
				<view style="display: flex;" @click="showStatus=!showStatus;showSort=false">
					<text class="city">{{currentCar.statusStr}}</text>
					<u-icon :name="showStatus ? 'arrow-up' : 'arrow-down'" color="#fff" size="14"></u-icon>
				</view>

				<view class="search">
					<u--input v-model="keyword" clearable border="none" fontSize="12" placeholder="输入车牌号查询"
						@blur="isSearch = false" @focus="isSearch = true" @change="searchChange" prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #909399" />
				</view>
				<view style="display: flex;" @click="showSort=!showSort;showStatus=false">
					<text class="city">{{currentSort.statusStr}}</text>
					<u-icon :name="showSort ? 'arrow-up' : 'arrow-down'" color="#fff" size="14"></u-icon>
				</view>
			</view>
		</u-sticky>

		<mescroll-body id="mescroll"  ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="customerItem" v-for="(item,index) in list" :key="index" @click="goCarDetail(item)">
				<view class="itemLine flex-row-center-sb">
					<text>车牌号</text>
					<text style="color: #333;">{{item.carNo|filterNull}}</text>
				</view>
				<view class="itemLine flex-row-center-sb" style="flex-wrap: nowrap;">
					<text>车辆信息</text>
					<text style="color: #333;">{{item.carInfo|filterNull}}</text>
				</view>
				<view class="itemLine flex-row-center-sb">
					<text>违章累计次数</text>
					<text style="color: #333;">{{item.totalNum|filterNull}}</text>
				</view>
				<view class="itemLine flex-row-center-sb">
					<text>违章累计罚款（元）</text>
					<text style="color: #333;">{{item.totalFines|filterNull}}</text>
				</view>
				<view class="itemLine flex-row-center-sb">
					<text>违章累计扣分</text>
					<text style="color: #333;">{{item.totalScore|filterNull}}</text>
				</view>
				<view class="itemLine flex-row-center-sb">
					<text>未处理违章累计次数</text>
					<text v-if="violationWarning.numberEnable&&item.UnhandledNum >= violationWarning.earlyNumber"
						style="color: #FF001D;">{{item.UnhandledNum|filterNull}}</text>
					<text v-else style="color: #333;">{{item.UnhandledNum|filterNull}}</text>
				</view>
				<view class="itemLine flex-row-center-sb">
					<text>未处理违章累计罚款（元）</text>
					<text v-if="violationWarning.moneyEnable&&item.UnhandledFines >= violationWarning.earlyMoney"
						style="color: #FF001D;">{{item.UnhandledFines|filterNull}}</text>
					<text v-else style="color: #333;">{{item.UnhandledFines|filterNull}}</text>
				</view>
				<view class="itemLine flex-row-center-sb">
					<text>未处理违章累计扣分</text>
					<text v-if="violationWarning.scoreEnable && item.UnhandledScore >= violationWarning.earlyScore"
						style="color: #FF001D;">{{item.UnhandledScore|filterNull}}</text>
					<text v-else style="color: #333;">{{item.UnhandledScore|filterNull}}</text>
				</view>
			</view>
		</mescroll-body>

		<view v-if="showStatus" class="filterPop" :style="[{top:popTop}]">
			<view class="filterContent">
				<text class="filterItem" :class="{active : currentCar.code===item.code}" v-for="(item, index) in cars"
					:key="index" @click.stop="changeCar(item)">{{item.statusStr}}</text>
			</view>
		</view>
		<view v-if="showSort" class="filterPop" :style="[{top:popTop}]">
			<view class="sortContent">
				<text class="sortItem" :class="{active : currentSort.code===item.code}" v-for="(item, index) in sorts"
					:key="index" @click.stop="changeSort(item)">{{item.statusStr}}</text>
			</view>
		</view>


	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import * as illegalApi from '@/api/illegal-api.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				offsetTop: 0,
				isSearch: false,
				showStatus: false,
				keyword: '',
				popTop: this.StatusBar + this.CustomBar + 36 + 'px',
				currentCar: {
					statusStr: '预警车辆',
					code: 1
				},
				cars: [{
						statusStr: '全部',
						code: 0
					},
					{
						statusStr: '预警车辆',
						code: 1
					},
					{
						statusStr: '非预警车辆',
						code: 2
					}
				],
				currentSort: {
					statusStr: '按更新时间倒序',
					sort: 'updateTime',
					order: 'desc',
					code: 0
				},
				showSort: false,
				sorts: [{
						statusStr: '按更新时间倒序',
						sort: 'updateTime',
						order: 'desc',
						code: 0
					},
					{
						statusStr: '按未处理次数倒序',
						sort: 'UnhandledNum',
						order: 'desc',
						code: 1
					},
					{
						statusStr: '按未处理罚款倒序',
						sort: 'UnhandledFines',
						order: 'desc',
						code: 2
					}, {
						statusStr: '按未处理分数倒序',
						sort: 'UnhandledScore',
						order: 'desc',
						code: 3

					}
				],

				list: [],
				violationWarning: {}

			};
		},
		onReady() {
			//监听筛选组件距离顶部的距离
			const query = uni.createSelectorQuery();
			query.select('#mescroll').boundingClientRect();
			query.exec((res) => {
				this.popTop = res[0].top + 'px'
			
			})
		},
		onLoad(op) {
			//获取手机状态栏高度
			this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750 * uni.getSystemInfoSync()
				.windowWidth) - 0.5;
			this.getViolationWarning();
		},
		methods: {
			getViolationWarning() {
				illegalApi.violationWarning().then(res => {
					this.violationWarning = res.data;
				})
			},
			upCallback(page) {

				var params = {
					carNo: this.keyword,
					illegalType: this.currentCar.code,
					sort: this.currentSort.sort,
					order: this.currentSort.order,
					pageNum: page.num,
					pageSize: page.size,
				}
				illegalApi.vehicleViolationStatistics(this.toParams(params)).then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//搜索
			searchChange(value) {
				this.mescroll.triggerDownScroll();
			},
			changeCar(item) {
				this.currentCar = item;
				this.showStatus = !this.showStatus;
				this.mescroll.triggerDownScroll();
			},
			changeSort(item) {
				this.currentSort = item;
				this.showSort = !this.showSort;
				this.mescroll.triggerDownScroll();
			},
      goCarDetail(item){
        uni.navigateTo({
          url:'/car/detail?carId=' + item.carId
        })
      }



		}
	};
</script>

<style lang="scss" scoped>
	.searchBox {
		padding: 20upx;
		display: flex;
		align-items: center;
		// background-color: #fff;
		background: linear-gradient(90deg, #3599FF 0%, #0275ED 100%);

		.city {
			font-size: 28rpx;
			color: #fff;
			margin-right: 8rpx;
		}

		.search {
			flex: 1;
			padding: 0 20upx;
			margin: 0 20upx;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24upx;
			background-color: #ffffff;
			border-radius: 30rpx;
		}
	}

	.noticeBox {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx 20rpx 0;
		padding: 22rpx;
		color: #666666;
		font-size: 24rpx;
	}

	.customerItem {
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx 20rpx 0;
		padding: 24rpx;

		.itemLine {
			padding: 12rpx 0;
			color: #666;
			font-size: 28rpx;
		}
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
	}

	.bottomView {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		padding: 0 44rpx;

		.btn {
			height: 88rpx;
			width: 312rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx;
			background-color: #1673FF;
			font-size: 32rpx;
			color: #fff;
		}
	}

	.filterPop {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 999999999;

		.filterContent {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			background-color: #ffffff;
			padding: 20rpx 44rpx 28rpx;

			.filterItem {
				margin-top: 30rpx;
				margin-right: 20rpx;
				width: 200rpx;
				line-height: 52rpx;
				text-align: center;
				background: #EFEFEF;
				border-radius: 6rpx;
				color: #666666;
				font-size: 28rpx;

				&.active {
					background: #1673FF;
					color: #ffffff;
				}
			}
		}
		.sortContent {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #ffffff;
			padding: 20rpx 44rpx 0;
			.sortItem {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #333333;
				font-size: 28rpx;
				border-bottom: 1rpx solid #F5F5F5;;
				&.active {
					color: #2879FF;
				}
			}
		}
	}
</style>
